<!-- 内容标题（页面标题） -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>个人中心</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="javascript:void(0)" onclick="loadSubPage('register')">用户</a></li>
                    <li class="breadcrumb-item active">注册</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<!-- 主体内容 -->
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 register-page">
                <div class="register-box">
                    <div class="card card-info">
                        <div class="card-header text-center">
                            <a href="index.html" class="h1"><b>bby</b>云U盘</a>
                        </div>
                        <div class="card-body">
                            <p class="login-box-msg">注册账号</p>

                            <form action="javascript:void(0)" method="post" id="registerForm" onsubmit="registerBtClick(this)">
                                <div class="input-group mb-3">
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-user"></span>
                                        </div>
                                    </div>
                                    <input type="text" class="form-control" id="registerInputUsername" name="nickname" placeholder="昵称">
                                </div>
                                <div class="input-group mb-3">
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-envelope"></span>
                                        </div>
                                    </div>
                                    <input type="email" name="email" id="registerInputEmail" class="form-control" placeholder="邮箱">
                                </div>
                                <div class="input-group mb-3">
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-lock"></span>
                                        </div>
                                    </div>
                                    <input type="password" name="password" id="registerInputPassword" class="form-control" placeholder="密码">
                                </div>
                                <div class="input-group mb-3">
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-lock"></span>
                                        </div>
                                    </div>
                                    <input type="password" class="form-control" id="registerInputPassword1" placeholder="再次输入密码">
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="input-group mb-3">
                                            <div class="input-group-append">
                                                <div class="input-group-text">
                                                    <span class="fas fa-barcode"></span>
                                                </div>
                                            </div>
                                            <input type="text" name="captcha" class="form-control" id="registerInputCaptcha" placeholder="请输入验证码">
                                        </div>

                                    </div>
                                    <div class="col-sm-3">
                                        <img class="img-captcha" style="width: 100%;" src="captcha" onclick="this.src='captcha'" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="icheck-primary">
                                            <input type="checkbox" id="registerInputAgreeTerms" name="terms" value="同意">
                                            <label for="registerInputAgreeTerms">
                                                <span style="">我已经阅读并接收<a href="javascript:void(0)">用户协议条款</a></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="checkmsg" id='checkmsg' style="color: red;"></div>
                                <div class="row">

                                    <!-- /.col -->
                                    <div class="col">
                                        <button type="submit" class="btn btn-primary btn-block">注册</button>
                                    </div>
                                    <!-- /.col -->
                                </div>
                            </form>
                            <a href="javascript:void(0)" class="text-center" onclick="loadSubPage('login')">我已经有账号了，登录</a>
                        </div>
                        <!-- /.form-box -->
                    </div><!-- /.card -->
                </div>
                <!-- /.col-md-6 -->
            </div>
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<script type="text/javascript">
    //判断是否敲击了Enter键
    $(document).keyup(function(event){
        if(event.keyCode ==13){
            $("#login").trigger("click");
        }
    });
    function registerBtClick(form) {
        //输入验证
        let nickname=form.nickname.value;
        let email=form.email.value;
        let password1=form.registerInputPassword.value;
        let password2=form.registerInputPassword1.value;
        let agreement=form.registerInputAgreeTerms.checked;
        if(!nickname || nickname == ""){
            showmsg("用户名不能为空");
            return false;
        }else{
            if(nickname.length<2||nickname.length>6){
                showmsg("用户名长度在2~6个字符之间");
                return false;
            }
        }
        if(!email || email == ""){
            showmsg("邮箱不能为空");
            return false;
        }else{
            let reg=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(!reg.test(email)){
                showmsg("邮箱格式不正确，请重新输入");
                return false;
            }
        }
        if(!password1 || password1 == ""){
            showmsg("请输入密码");
            // form.password.focus ();
            return false;
        }else{
            if(password1.length<6||password1.length>12){
                showmsg("密码长度在6~12个字符之间");
                return false;
            }
        }
        if(!password2 || password2 == ""){
            showmsg("请输入密码");
            // form.password.focus ();
            return false;
        }else{
            if(password2.length<6||password2.length>12){
                showmsg("密码长度在6~12个字符之间");
                return false;
            }
        }
        if(password1!=password2) {
            showmsg("密码不一致");
            return false;
        }
        if(!agreement){
            showmsg("请勾选条款");
            return false;
        }
        else{
            $.ajax({
                type: "POST",   //提交的方法
                url:"doRegister", //提交的地址
                data:$('#registerForm').serialize(),// 序列化表单值
                dataType:'json',
                async: false,
                error: function(request) {
                    //失败提示
                    console.log("注册失败!");
                    console.log(request)
                },
                success: function(data) {  //成功
                    console.log(data);
                    console.log(typeof(data))
                    console.log(data.captchaVerify)
                    if (data.captchaVerify==='OK'){
                        if (data.status==0) loadSubPage('login');
                        else if (data.status==7) showmsg("该邮箱已注册！");
                        else showmsg("注册失败，请检查信息！");
                    }else {
                        if(data.status==1) showmsg("验证码错误！");
                        else showmsg("验证码已失效，请刷新！");
                    }
                    //
                }
            });
            return false;
        }
    }
    // 显示提示信息
    function showmsg(msg){
        $("#checkmsg").text(msg);
    }
</script>